<%@ page language="java" pageEncoding="UTF-8"%><%@ include
	file="/WEB-INF/commons/taglibs.jsp"%>
<!-- 如果session中用户名为空，跳转到登录页面 -->
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
	if (user == null) {
		response.sendRedirect(userService.createLoginURL("/myFlows"));
	}
%>

<!-- Flow展示区 -->
<script type="text/javascript">
$(function(){
	function showMsg($item, msgType, msg, timeout){
		var classType='ui-state-highlight';
		if(msgType=='error'){
			classType='ui-state-error';
		}
		$item.addClass(classType);
		$item.html("<span class='ui-icon ui-icon-info'></span>"+msg);
		setTimeout(function(){$item.html('').removeClass(classType);},timeout);
	}
	var $dialog = $('#pack-crt-dialog').dialog({
		autoOpen: false,
		width: 300,
		height: 112,
		modal: true,
		buttons: {
			Submit: function(){
				$.ajax({
					url: '/myFlows/pack/ajax/crt',
					data: 'name='+$('#pack-name').val(),
					type: 'POST',
					timeout: 15000,
					error: function(){showMsg($('#message'),'error','电话分组提交失败!',3000);},
					success: function(response){
						if(response.search('ERROR')!=-1){
							showMsg($('#message'),'error','电话分组创建失败!',3000);
						}else{
							$dialog.dialog('close');
							showMsg($('#message'),'info','电话分组创建成功!',3000);
							setTimeout(function(){window.location.href='/myFlows';},2000);
						}
					}
				});
			},
			Cancel: function(){$(this).dialog('close');}
		},
		open: function(){$('#pack-name').focus();},
		close: function(){$('form')[0].reset();}
	});
	$('a[id="pack-crt"]').click(function(){$dialog.dialog('open');});
	$('a[class$="flow-crt"]').click(function(){
		var packId=$(this).attr("packId");
		window.location.href="/flows/create?packId="+packId;
	});
	$('a[class$="pack-share"]').click(function(){});
});
</script>
<table>
	<tr>
		<td><%@ include file="/WEB-INF/commons/flows.jsp"%></td>
		<td>
		<div id="flowsNav">
		<div class="navContainer">
		<p class="title">电话分组<a id="pack-crt" href="#">创建分组</a></p>
		<ul>
			<c:forEach var="e" items="${it.packs}">
				<li>
				<p class="name"><a href="<c:url value="/myFlows/${e.id}"/>">${e.name}</a>&nbsp;<a
					href="#" title="添加电话" packId="${e.id}"
					class="ui-icon ui-icon-plus flow-crt">添加电话</a></p>
				<!-- <p class="info"><fmt:formatDate value="${e.crtDate}"
					pattern="yyyy-MM-dd HH:mm:ss" /></p> --></li>
			</c:forEach>
		</ul>
		</div>
		</div>
		</td>
	</tr>
</table>
<div id="pack-crt-dialog" title="创建电话分组">
<form>名称&nbsp;&nbsp;<input id="pack-name" name="pack-name" type="text"
	class="mediumInput" style="width: 225px;" /></form>
</div>
